<template>
  <div>
    <el-form
      label-position="right"
      label-width="100px"
      :model="zuform"
      :rules="rules"
      ref="forms"
    >
      <el-form-item label="用户名" label-width="100px" style="width: 90%;color:#fff;"  prop="name">
        <el-input v-model="zuform.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号" label-width="100px" style="width: 90%;"  prop="phone">
        <el-input v-model="zuform.phone"></el-input>
      </el-form-item>
      <el-form-item label="登入密码" label-width="100px" style="width: 90%;"  prop="psword">
        <el-input v-model="zuform.psword"></el-input>
      </el-form-item>
      <el-form-item label="再次输入密码" label-width="100px" style="width: 90%;" prop="psword2">
        <el-input v-model="zuform.psword2"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('forms')">注册</el-button>
        <el-button @click="resetForm('forms')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive,getCurrentInstance, toRefs } from "vue";

export default defineComponent({

  setup() {
    let phoneCheck = (rule:any, value:any, callBack:any) => {
      let tes = /^[1]\d{10}$/.test(value);
      console.log(typeof value,tes)
      if (!tes) {
        return callBack(new Error("请正确输入手机号"));
      }
      callBack()
    };
    let pswordCheck=(rule:any, value:any, callBack:any)=>{
        let tes=/\d{4,8}/.test(value)
        // let tes1=/^\w+\d{4,8}/.test(value)
        // let tes2=/[0-9a-zA-Z]{6,10}/.test(value)
        if(!tes){
            return callBack(new Error("密码格式不正确"));
        }
        callBack()
    }
    let psword2Check=(rule:any, value:any, callBack:any)=>{
        if(value!==state.zuform.psword){
            return callBack(new Error("两次密码输入不一致"));
        }
        callBack()
    }
    let state = reactive({
      zuform: {
        name: "",
        phone: "",
        psword: "",
        psword2: "",
      },
      rules: {
        name: [
          { require: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" },
        ],
        phone: [{validator:phoneCheck,trigger:'blur'}],
        psword:[{validator:pswordCheck,trigger:'blur'}],
        psword2:[{validator:psword2Check,trigger:'blur'}]
      },
    })
    
     //@ts-ignore
    let {ctx}=getCurrentInstance()

    let submitForm=(form:any)=>{
      ctx.$refs[form].validate((valid:Boolean)=>{
            if(valid){
                let userInfo={
                    userName:state.zuform.name,
                    userPhone:state.zuform.phone,
                    userPsword:state.zuform.psword
                }
                localStorage.setItem('userInfo',JSON.stringify(userInfo) )
                ctx.$message.success({
                    message:'注册成功，请返回登入'
                })
                ctx.$emit('goLogin')
            }else{
                ctx.$message.error({
                    message:'请确认输入信息无误'
                })
            }
       })
    }

    let resetForm=(form:any)=>{
        ctx.$refs[form].resetFields()
    }

    return {
        ...toRefs(state),
        submitForm,resetForm
    }
  },
});
</script>

<style lang='less' scoped>
/deep/ .el-form-item__label{
    color:#fff;
    font-weight: 800;
}
</style>